<template>
  <t-popup
    v-model="visible"
    placement="center"
    style="width: 100%"
    :destroyOnClose="true"
  > 
    <!-- <el-carousel-item v-for="(item, index) in videoList" :key="index">
        <video
          ref="videoref"
          :src="item"
          controls
          style="width: 100%; height: 200px"
        ></video>
      </el-carousel-item> -->
    <div style="width: 100%;height: 250px;">
      <t-swiper
        :navigation="{ type: 'dots' }"
        :autoplay="false"
        @change="handleChange"
        style="width: 100%;background-color: #f5f5f5;height: 250px"
      >
        <t-swiper-item v-for="(item, index) in videoList" :key="index">
          <video
            ref="videoref"
            :src="item"
            controls
            style="width: 100%; height: 250px"
          ></video>
        </t-swiper-item>
      </t-swiper>
    </div>
    <t-icon
      class="close-btn"
      name="close-circle"
      size="32"
      color="#fff"
      @click="onClose"
    />
  </t-popup>
</template>

<script>
export default {
  props: {
    videoList: { type: Array, default: () => [] },
  },
  data() {
    return { visible: false };
  },
  methods: {
    onClose() {
      this.visible = false;
    },
    handleChange() {
      if (!this.$refs.videoref) return;
      this.$refs.videoref.forEach((video) => {
        if (video) video.pause();
      });
    },
  },
};
</script>
<style lang="scss">
.popup-demo {
  padding: 16px;
}

.close-btn {
  position: absolute;
  left: 50%;
  margin-left: -16px;
  bottom: calc(-1 * (24px + 32px));
}

.wrapper {
  margin: 16px;
  display: block;
}
</style>